import React, { Component } from 'react'
import CourseItem from '../../components/course'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { addCart } from '../home/store/actionCreators'
import { removeCart } from '../cart/store/actionCreators'
import { changeShowLogin } from '../../components/header/store/actionCreators'
import {
  Container,
  FilterWrapper,
  FilterList,
  FilterItem
} from './style'

import { Pagination } from 'antd';

const gradeList = ['全部','一年级','二年级','三年级','四年级','五年级','六年级','初一','初二','初三','高一','高二','高三']
const subjectList = ['全部','小学语文','小学数学','小学英语','中小学师德培训','初中科学','初中英语','初中数学','初中语文','高中地理','高中历史','高中政治','高中生物','高中化学','高中物理','高中英语','高中语文','高中数学']
const typeList = [{
  key: 'all',
  value: '全部'
}, {
  key: 'soon',
  value: '即将开始'
}, {
  key: 'playing',
  value: '直播中'
}, {
  key: 'video',
  value: '精彩回放'
}, {
  key: 'new',
  value: '最新课程'
}]
const lessonType = ['精品收费课', '公益课']
const order = [{
  key: 'orderSubject',
  value: '是否按科目排序',
  status:false
}, {
  key: 'orderYear',
  value: '是否按年份排序',
  status: false
}]
class Course extends Component {
  constructor(props) {
    debugger
    super(props);
    this.state = {
      grade: '全部',
      subjectName: '全部',
      type: 'all',
      lessonType: '',
      key: props.location.query ? props.location.query.search: '',
      page: 1,
      orderSubject: false,
      orderYear: false
    }
  }
  componentDidMount() {
    this.loadCourse()
  }

  loadCourse() {
    this.props.getList({
      grade: this.state.grade,
      subjectName: this.state.subjectName,
      type: this.state.type,
      key: this.state.key,
      page: this.state.page,
      lessonType: this.state.lessonType,
      isOrderBySubject: this.state.orderSubject,
      isOrderByYear: this.state.orderYear
    })
  }

  componentWillReceiveProps(props) {
    debugger
    if(props.search !== this.state.key) {
      this.setState({
        key: props.search
      }, ()=> this.loadCourse())
    }
  }

  renderOrder(item) {
    if(item.key === 'orderSubject') {
      debugger
      order[0].status = !this.state.orderSubject
      this.setState({
        orderSubject: !this.state.orderSubject
      }, ()=> this.loadCourse())
    }else {
      order[1].status = !this.state.orderYear
      this.setState({
        orderYear: !this.state.orderYear
      }, ()=> this.loadCourse())
    }
  }

  cartStatus(params) {
    debugger
    let status = params.get('shoppingStatus')
    let id = params.get('lessonId')
    if(status === '已经购买') {
      this.props.history.push({
        pathname: '/courseitem/' + id
      })
      // window.location.href='/courseitem?id=' + id
    }else if(status === '已加入购物车'){
      this.props.removeCart({
        lessonId: id
      })
    }else if(status === '免费') {
      if(localStorage.getItem('userData')) {
        this.props.history.push({
          pathname: '/courseitem/' + id
        })
      } else {
        this.props.changeLogin(true)
      } 
    }else {
      if(localStorage.getItem('userData')) {
        this.props.addCart(id)
      } else {
        this.props.changeLogin(true)
      } 
    }
  }

  changePage(page, pageSize) {
    this.setState({
      page
    }, ()=> this.loadCourse())
  }

  render () {
    return <Container>
      <FilterWrapper>
        <FilterList>
          <li className="type">
            <span>年级：</span>
            <FilterItem>
              {
                gradeList.map((item,idx)=> {
                 return(<li key={idx} onClick={()=> {this.setState({grade: item}, ()=> {this.loadCourse()})}}>
                    <a href="#" className={[item === this.state.grade ? 'active' : '']}>
                      {item}
                    </a>
                  </li>)
                })
              }
            </FilterItem>
          </li>
          <li className="type">
            <span>科目：</span>
            <FilterItem>
              {
                subjectList.map((item,idx)=> {
                  return (
                    <li key={idx} onClick={()=> {this.setState({subjectName: item}, ()=> {this.loadCourse()})}}>
                      <a href="#" className={[item === this.state.subjectName ? 'active' : '']}>{item}</a>
                    </li>
                  )
                })
              }
            </FilterItem>
          </li>
          <li className="type">
            <span>类型：</span>
            <FilterItem>
              {
                typeList.map((item,idx) => {
                  return (
                    <li key={idx} onClick={()=> {this.setState({type: item.key}, ()=> {this.loadCourse()})}}>
                      <a href="#" className={[item.key === this.state.type ? 'active' : '']}>{item.value}</a>
                    </li>
                  )
                })
              }
            </FilterItem>
          </li>
          <li className="type">
            <span>排序:</span>
            <FilterItem>
              {
                order.map((item, idx) => {
                  return (
                    <li key={idx} onClick={this.renderOrder.bind(this, item)}>
                      <a href="#" className={[item.status ? 'active' : '']}>{item.value}</a>
                    </li>
                  )
                })
              }
            </FilterItem>
          </li>
          <li className="type">
            <span>课程类型:</span>
            <FilterItem>
              {
                lessonType.map((item, idx) => {
                  return (
                    <li key={idx} onClick={()=> {this.setState({lessonType: idx}, ()=> {this.loadCourse()})}}>
                      <a href="#" className={[idx === this.state.lessonType ? 'active' : '']}>{item}</a>
                    </li>
                  )
                })
              }
            </FilterItem>
          </li>
          {
            this.state.key ? (
            <li className="type">
            <span>关键字</span>
            <FilterItem>
              <li>
                <a href="#" className="active">{this.props.search}</a>
              </li>
            </FilterItem>
          </li>) : null
          }
        </FilterList>
      </FilterWrapper>
      <div className="clearfix" style={{marginBottom: "40px"}}>
        <CourseItem list={this.props.courseList} type="course_list"  addCart={(obj) => this.cartStatus.bind(this, obj)}  />
      </div>
      <div style={{textAlign: "center",marginBottom: "40px"}}>
        <Pagination defaultCurrent={this.state.page} total={this.props.total} pageSize={this.props.pageSize} onChange={this.changePage.bind(this)}/>
      </div>
    </Container>
  }
}

const mapState = (state) => {
  console.log('search', state.getIn(['header', 'search']))
  return {
    courseList: state.getIn(['course', 'course', 'result']),
    total: state.getIn(['course', 'course', 'total_item_size']),
    pageSize: state.getIn(['course', 'course', 'page_size']),
    search: state.getIn(['header', 'search'])
  }
}

const mapDispatch = (dispatch) => ({
  getList(obj) {
    dispatch(actionCreators.getCourseList(obj))
  },
  addCart(lessonId) {
    dispatch(addCart({
      lessonId
    }))
  },
  removeCart(params) {
    dispatch(removeCart(params))
  },
  changeLogin(params) {
    dispatch(changeShowLogin(params))
  }

})


export default connect(mapState, mapDispatch)(Course)